<template>
	<view class="container">
		<u-navbar
			title="审核驳回"
			@rightClick="rightClick"
			:autoBack="true"
		>
			<view
				class="u-nav-slot"
				slot="right"
				style="display: flex;align-items: center;height: 100rpx;"
			>
				<view>{{rightText}}</view>
				<u-icon name="/static/theme/default/home/xiajiantou.png" size="12" style="margin-top: 6rpx;"></u-icon>
			</view>
		</u-navbar>
		<u-overlay :show="show" @click="show = false"  :opacity="0.1">
			<view class="select-box">
				<view class="select-box-item" hover-class="clickable" @click="changeMode('我的')">我的</view>
				<view class="select-box-item" hover-class="clickable" @click="changeMode('全部')">全部</view>
			</view>
		</u-overlay>
		<view class="container-card" v-for="item in list" :key="item.id">
			<view class="container-card__head">
				<view class="container-card__head--left">{{item.obsname}}</view>
				<view class="container-card__head--right">
					<view class="container-card__status" style="color: #fa3534" v-if="item.flag == -1">已驳回</view>
					<view class="container-card__status" style="color: #3C9CFF" v-else-if="item.flag == 1">已登记</view>
					<view class="container-card__status" style="color: #F9AE3D" v-else-if="item.flag == 2">已审核</view>
					<view class="container-card__status" style="color: #ff6600" v-else-if="item.flag == 3">已出库</view>
				</view>
			</view>
			<view class="container-card__body" @click="goDetail(item)">
				<view class="container-card__body--title">{{item.title}}</view>
				<view class="container-card__body--des">
					<text>入库时间:</text>
					<text>{{item.plandate}}</text>
				</view>
				<view class="container-card__body--des">
					<text>执行人:</text>
					<text>{{item.myuser}}</text>
				</view>
				<view class="container-card__body--des">
					<text>备注:</text>
					<text>{{item.remarks}}</text>
				</view>
				<view class="container-card__body--des">
					<text>应用项目:</text>
					<text>{{item.wbsname}}</text>
				</view>
				<view class="container-card__body--des">
					<text>供货单位:</text>
					<text>{{item.supplier}}</text>
				</view>
				<view class="container-card__body--more">查看详情</view>
				<view class="container-card__body--id">
					<text>流水号:</text>
					<text>{{item.id}}</text>
				</view>
			</view>
		</view>
		<no-data v-if="!list.length"></no-data>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import NoData from '@/components/custom/no-data/no-data.vue'
	
	export default {
		components: {
			NoData
		},
		data() {
			return {
				list: [],
				obsusername: _data.localData('name'),
				show: false,
				flag: -1,
				rightText: '我的'
			}
		},
		onShow() {
			this.getGoodsInCheckList()
		},
		methods: {
			getGoodsInCheckList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getGoodsInCheckList',
					apiparam: {
						flag: -1,
						obsusername: this.obsusername
					},
					success(res) {
						that.list = res
					}
				})
			},
			goDetail(v) {
				uni.navigateTo({
					url: './detail?data=' + JSON.stringify(v) + '&type=edit'
				})
			},
			/**
			 * 点击导航栏右侧文字
			 */
			rightClick() {
				this.show = !this.show;
			},
			/**
			 * 切换我的/全部
			 * @param {Object} v 传参
			 */
			changeMode(v) {
				this.rightText = v;
				this.obsusername = v == '我的' ? _data.localData('name') : '';
				this.getGoodsInCheckList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding-top: 150rpx;
		/* #ifdef H5 */
		padding-top: 100rpx;
		/* #endif */
		
		&-card {
			position: relative;
			margin: 20rpx;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			
			&__head {
				font-size: 25rpx;
				height: 70rpx;
				line-height: 70rpx;
				color: #aaa;
				display: flex;
				justify-content: space-between;
				
				&--left {
					flex: 5;
				}
				
				&--right {
					flex: 1;
					display: flex;
					justify-content: flex-end;
				}
			}
			
			&__status {
				font-size: 25rpx;
				text-align: right;
			}
			
			&__body {
				&--title {
					font-size: 30rpx;
					font-weight: bold;
					height: 80rpx;
					line-height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				&--des {
					font-size: 25rpx;
					color: #aaa;
				}
				
				&--more {
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #1E9FF2;
				}
				
				&--id {
					position: absolute;
					right: 30rpx;
					bottom: 30rpx;
					font-size: 25rpx;
					color: #666;
				}
			}
		}
	}
	
	.select-box {
		position: absolute;
		right: 0;
		top: 155rpx;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		width: 200rpx;
		background-color: #eee;
		
		&-item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #000;
		}
	}
</style>
